<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
		</style>
		<script>
			window.onload = (function(){
				console.log(document);
				let div = document.getElementById("div1");
				console.log(div, typeof div);
				console.log(div.innerHTML);
				// 调用对象的属性 进行赋值
				div.innerHTML = "tianjin";
				// 我们一般不适用write方法
				document.write("shanghai");
			})
		</script>
	</head>
	<body>
		<!-- 
		DOM介绍
		当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
		我们主要关注的就是Document的属性和方法
		能做的事：
			1.JavaScript 能改变页面中的所有 HTML 元素（HTML标签）
			2.JavaScript 能改变页面中的所有 HTML 属性 （id class src href style）
			3.JavaScript 能改变页面中的所有 CSS 样式 
			4.JavaScript 能删除已有的 HTML 元素和属性
			5.JavaScript 能添加新的 HTML 元素和属性
			6.JavaScript 能对页面中所有已有的 HTML 事件作出反应 （click 在button）
			7.JavaScript 能在页面中创建新的 HTML 事件  div

		DOM编程：
			1.先获取HTML元素 （靠方法）
			2.修改元素中属性的值 （靠属性）

		 -->
		 <!-- 
			CSS中尽量使用class属性
			JS中尽量使用id属性



		  -->
		 <div id="div1">beijing</div>
		 <div id="div2">tianjin</div>
	</body>
</html>